import {NavLink, useNavigate, useParams, useRoutes} from 'react-router-dom'
import HomeView from '../views/HomeView'
import AboutView from '../views/AboutView'
import AdminView from '../views/admin/AdminView'
import DashView from '../views/admin/DashView'
import OrderList from '../views/admin/OrderList'
const  routes = [
	{path:"",element:<HomeView></HomeView>},
	{path:"/about",element:<AboutView></AboutView>},
	{path:"/product/:id",element:<ProductView></ProductView>},
	{path:"/admin",element:<AdminView></AdminView>,
	 children:[
		{path:'',element:<DashView/>},
		{path:'orderlist',element:<OrderList/>}
	 ]
  },
	{path:"*",element:<NoMatch/>}
]


function RouterView(){
	const elem = useRoutes(routes)
	return  elem;
}
export default RouterView

function ProductView(props){
	const {id} = useParams();
  const navigate = useNavigate()
	return <div>
		产品页面,参数：{id}
		<button onClick={()=>history.back()}>返回</button>
		<div onClick={()=>navigate("/")}>首页</div>
		<NavLink 
		to={{pathname:'/about',search:"name=mumu&age=18",hash:"abc"}}  
		state={{v1:"abc",v2:'123'}}>关于</NavLink>
		</div>
}

function NoMatch(){
	return <div>
		<h1>您的页面被外星人截走404</h1>
		<NavLink to="/">首页</NavLink>
	</div>
}

 
 